<template>
  <div>
    <div class="apply3_userInfo">
      <div class="apply3_title">信息确认</div>
      <div class="_userInfo">
        <span class="_userName">{{dataObj.name}}</span>
        <span class="_userPhone">{{dataObj.main_parent}}</span>
        <div class="user_buyThings_table">
          <div class="tableTitle" v-if="dataObj.content_arr.length>0">
            <a-row
              type="flex"
              align="middle"
              style="height:42px;background:#f7f8f9;padding:0 40px;"
            >
              <a-col :span="8" style="text-align:left">项目</a-col>
              <a-col :span="8" style="text-align:center">数量</a-col>
              <a-col :span="8" style="text-align:right">金额</a-col>
            </a-row>
            <a-row
              type="flex"
              align="middle"
              style="height:42px;padding:0 40px;"
              v-for="(item,index) in dataObj.content_arr"
              :key="index"
            >
              <a-col :span="8" style="text-align:left">{{item.name}}</a-col>
              <a-col :span="8" style="text-align:center">{{item.buy_number+item.give_number}}</a-col>
              <a-col :span="8" style="text-align:right">{{item.signing_price}}元</a-col>
            </a-row>
          </div>
          <div class="apply3_count" v-if="dataObj.content_arr.length>0">合计：{{dataObj.receivable}}元</div>
        </div>
      </div>
      <div class="apply3_title">收款信息</div>
      <div class="_billInfo">
        <div class="formLabel">
          <span class="left_label">应交金额：</span>
          <span class="right_content">{{dataObj.receivable}}&nbsp; 元</span>
        </div>

        <div class="formLabel" style="display:flex;">
          <span class="left_label">收款方式：</span>
          <div class="right_content">
            <div class="right_content_flex">
              <div v-for="(item,index) in btnStyle" :key="index" class="payWay">
                <a-checkbox @change="changePayWay($event,item.type,index)">
                  <a-icon :type="item.icon" :style="{'color':item.color,'margin-right':'10px'}"></a-icon>
                  {{item.text}}
                </a-checkbox>
                <span v-if="dataObj.show[index]" style="text-align:right">
                  <a-input
                    style="outline: none;border:none;width:80px;box-shadow:none;"
                    onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
                    @change="changeMoney($event,item.type)"
                  ></a-input>元
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="formLabel">
          <span class="left_label">
            <span class="left_label_must" style="color:#f5222d;">*</span>
            实缴金额：
          </span>
          <span class="right_content">{{dataObj.real_price}}&nbsp;元</span>
        </div>
      </div>
      <div class="apply3_title">其他信息</div>
      <div class="_billInfo">
        <div class="formLabel">
          <span class="left_label">交费日期：</span>
          <span class="right_content">
            <a-date-picker
              placeholder="请选择交费日期"
              v-model="dataObj.purchase_at"
              style="width:200px;"
            />
          </span>
          <div class="formLabel">
            <span class="left_label">业绩归属人：</span>
            <span class="right_content">
              <a-select
                style="width:200px;"
                placeholder="请选择业绩归属人"
                mode="multiple"
                @change="choiceUser"
              >
                <a-select-option
                  v-for="(item,index) in teacherSelect"
                  :key="index"
                  :value="item.id"
                >{{ item.name}}</a-select-option>
              </a-select>
            </span>
          </div>
        </div>
        <div class="formLabel">
          <span class="left_label">经办人：</span>
          <span class="right_content">
            <a-input
              placeholder="请填写经办人"
              style="width:200px;"
              v-model="dataObj.operator"
              @change="reloadViews"
            />
          </span>
        </div>
        <div class="formLabel">
          <span class="left_label" style=" vertical-align: top;">备注：</span>
          <span class="right_content">
            <a-textarea
              placeholder="最多输入1000字"
              :autoSize="{ minRows: 4, maxRows:10}"
              allowClear
              :maxLength="1000"
              style="width:400px;"
              v-model="dataObj.order_remarks"
              @change="reloadViews"
            />
          </span>
        </div>
      </div>
    </div>
    <div style="text-align:right;">
      <a-button type="primary" @click="finish">提交</a-button>
      <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
    </div>
  </div>
</template>

<script>
// import { internet_blanking, payByCard } from '@/core/icons'
import { teacherList } from '@/api/teacher'
import moment from 'moment'
export default {
  name: 'Step3',
  props: ['data'],
  data() {
    return {
      // internet_blanking,
      // payByCard,
      loading: false,
      btnStyle: [
        {
          type: 1,
          text: '支付宝',
          color: '#1890ff',
          icon: 'alipay-circle',
          theme: '',
          price:100,
        },
        {
          type: 2,
          text: '微信',
          color: '#52c42a',
          icon: 'wechat',
          theme: '',
          price:100,
        },
        {
          type: 3,
          text: '现金',
          color: '#FF7F24',
          icon: 'transaction',
          theme: 'filled'
        },
        {
          type: 4,
          text: '网银转账',
          color: '#1296db',
          icon: 'global',
          theme: '',
          price:100,
        },
        {
          type: 5,
          text: 'POS机刷卡',
          color: '#39d63e',
          icon: 'credit-card',
          theme: '',
          price:100,
        }
      ],
      teacherSelect: [],
      dataObj: null
    }
  },
  created() {
    teacherList({ school_id: this.$store.state.user.school, pageSize: 999999999 }).then(res => {
      this.teacherSelect = res.data
    })
    this.dataObj = JSON.parse(JSON.stringify(this.data))
    Object.assign(this.dataObj, {
      operator: this.$store.state.user.info.name || '',
      real_price: 0,
      order_remarks: '',
      real_price_arr: [],
      purchase_at: moment(),
      user_id: null,
      show: [false, false, false, false, false]
    })
  },
  computed: {},
  methods: {
    finish() {
      if (this.dataObj.real_price_arr.length>0) {
        if(this.receivable<this.real_price){
          this.$message.error('实收金额不能大于应收金额')
          return
        }
        this.dataObj.purchase_at=moment(this.dataObj.purchase_at).format('YYYY-MM-DD')
        this.dataObj.content_arr.forEach(val=>{
          if(val.buy_start_time ){
            val.buy_start_time = moment(val.buy_start_time).format('YYYY-MM-DD')
          }
        })
        this.$emit('finish', this.dataObj)
      } else {
        this.$message.error('请选择收费方式')
        return
      }
    },
    prevStep() {
      this.$emit('prevStep', this.dataObj)
    },
    changePayWay(e, checkType, index) {
      if (e.target.checked) {
        this.dataObj.real_price_arr.push({
          charge_type: checkType,
          real_price: 0,
        })
        this.dataObj.show[index] = true
      } else {
        this.dataObj.real_price_arr.forEach((val, index) => {
          if (val.charge_type == checkType) {
            this.dataObj.real_price_arr.splice(index, 1)
          }
        })
        this.dataObj.show[index] = false

      }
      this.$forceUpdate()
    },
    changeMoney(e, checkType) {
      let num = e.target.value.replace(/[^\d.]/g, '')
      this.dataObj.real_price=0
      this.dataObj.real_price_arr.forEach(val => {
        if (val.charge_type == checkType) {
          val.real_price = num
        }
        this.dataObj.real_price = this.dataObj.real_price+Number(val.real_price)
      })
    },
    //选择跟进人
    choiceUser(value) {
      this.dataObj.user_id = value
    },
    reloadViews() {
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="less" scoped>
.payWay {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  width: 244px;
  border: 1px solid #e8e8e8;
  margin: 0 10px 0 0;
  border-radius: 4px;
  height: 50px;
  align-items: center;
}
.apply3_title {
  font-size: 16px;
  color: #333;
  line-height: 48px;
  font-weight: 500;
}
.apply3_userInfo {
  ._userInfo {
    padding: 10px 77px 8px;
    ._userName {
      display: inline-block;
    }
    ._userPhone {
      display: inline-block;
      margin-left: 20px;
    }
    .user_buyThings_table {
      margin-top: 20px;
      .tableTitle {
        border: 1px solid #e8e8e8;
        .ant-row-flex {
          border-bottom: 1px solid #e8e8e8;
        }
        .ant-row-flex:last-child {
          border-bottom: none;
        }
      }
      .apply3_count {
        text-align: right;
        margin: 20px 0;
        padding-right: 5px;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
  ._billInfo {
    padding: 10px 100px;
    .formLabel {
      margin: 10px 0;
      .left_label {
        height: 40px;
        line-height: 40px;
        display: inline-block;
        width: 100px;
        text-align: right;
        // vertical-align: top;
      }
      .right_content {
        display: inline-block;
        .right_content_flex {
          display: flex;
          div {
            margin: 0 10px 0 0;
            .ant-btn {
              i {
                font-size: 20px;
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}
</style>













        if (val.price.length > 0) {
          val.project_id = val.id
          val.project_type = 1 //类型：1课程，2物品，3费用
          val.course_type_num = val.type //一对一或一对多  1——>对一 2——>对多
          val.price_type = val.price[0].id //当前选择的定价标准ID
          val.choiceCombo = val.price[0] //当前选择的定价标准 对象
          val.unit_price = val.price[0].unit_price //当前单价
          if (val.class.length > 0) {
            val.class_id = val.class[0].id
          } else {
            val.class_id = undefined
          }
          val.total_number = 1
          val.buy_number = 1 //购买数量
          val.give_number = 0 //赠送数量
          val.signing_price = val.price[0].unit_price //总价
          val.course_type = 0 //表明当前选择课程类型 课程类型：0购买，1新报，2续报，3扩科
          val.buy_start_time = undefined
          val.discount = {
            //优惠方式  type：1直减 2折扣
            type: 1,
            value: 0
          }
        } else {
          val.project_id = val.id
          val.project_type = 1 //类型：1课程，2物品，3费用
          val.course_type_num = val.type //一对一或一对多  1——>一对一 2——>一对多
          val.price_type = null //当前选择的定价标准ID
          val.unit_price = null //当前单价
          if (val.class.length > 0) {
            val.class_id = val.class[0].id
          } else {
            val.class_id = undefined
          }
          val.total_number = 1
          val.buy_number = 1 //购买数量
          val.give_number = 0 //赠送数量
          val.signing_price = 0 //总价
          val.course_type = 0 //表明当前选择课程类型 课程类型：0购买，1新报，2续报，3扩科
          val.discount = {
            //优惠方式  type：1直减 2折扣
            type: 1,
            value: 0
          }
        }
        if (arr.indexOf(val.id) == -1) {
          this.data.push(val)
        }